<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <!-- 全屏 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 上方栏显示 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 不自动识别号码 -->
    <meta name="format-detection" content="telephone=no">
    <!-- Include js plugin -->
    <title>视频课</title>
    <link rel="stylesheet" href="/static/wap/skin/css/layout.css">
    <link rel="stylesheet" href="/static/wap/skin/css/demos.css">
	<link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
	<link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
</head>
<body>
<header class="brB">
    <div class="h_top">
        <div class="hLeft"><a href="/" class="icoH icoReturn mt20"></a></div>
        <div class="hCenter"><span class="tit c-3ac9af">视频课</span></div>
    </div>
</header>
<div class="warp">
	<div class="fix">
        <!--E star-->
        <input type="hidden" id="page" name="id" value="1" />
        <div class="select_listbox odr_b">
            <div class="layout-box tac brB" id="select_ify">
                <div class="box-col">
                    <div class="citytit odr_r">
                        <{if $info.order == 1}>
                            <a href="javascript:;">热门</a>
                        <{/if}>
                        <{if $info.order == 2}>
                            <a href="javascript:;">价格由高到低</a>
                        <{/if}>
                        <{if $info.order == 3}>
                            <a href="javascript:;">价格由低到高</a>
                        <{/if}>
                        <{if $info.order == 4}>
                            <a href="javascript:;">销量</a>
                        <{/if}>
                        <{if $info.order == 0}>
                            <a href="javascript:;">默认</a>
                        <{/if}>
                        <i></i>
                        <s></s>
                    </div>
                    <div class="citybox">
                        <a href="/video/index/0/<{$info.cate}>/<{$info.subject}>">默认</a>
                        <a href="/video/index/1/<{$info.cate}>/<{$info.subject}>">热门</a>
                        <a href="/video/index/4/<{$info.cate}>/<{$info.subject}>">销量</a>
                        <a href="/video/index/2/<{$info.cate}>/<{$info.subject}>">价格由高到低</a>
                        <a href="/video/index/3/<{$info.cate}>/<{$info.subject}>">价格由低到高</a>
                    </div>
                </div>
                <!-- <div class="box-col">
                    <div class="citytit">
                        <a href="javascript:;">排序</a>
                        <i></i>
                        <s></s>
                    </div>
                    <div class="citybox">
                        <a href="javascript:;">排序1</a>
                        <a href="javascript:;">排序2</a>
                    </div>
                </div> -->
                <div class="box-col">
                    <div class="citytit">
                        <{foreach from=$course_cate item=item}>
                        <{if $item.id == $info.cate}>
                        <a href="javascript:;"><{$item.name}></a>
                        <{/if}>
                        <{/foreach}>
                        <{if $info.cate == 0}>
                        <a href="javascript:;">全部</a>
                        <{/if}>
                        <i></i>
                        <s></s>
                    </div>
                    <div class="citybox">
                        <a href="/video/index/<{$info.order}>/0/<{$info.subject}>">全部</a>
                        <{foreach from=$course_cate item=item}>
                        <a href="/video/index/<{$info.order}>/<{$item.id}>/<{$info.subject}>"><{$item.name}></a>
                        <{/foreach}>
                    </div>
                </div>
            </div>
        </div>
        <!--E end-->
    </div>
    <div class="fix b-FFFFFF" id='list'>
        <ul  id="layui_flow">
            <{foreach from = $list.result item=item}>
            <li class="p20 brB">
                <a class="layout-box" href="/video/detail/<{$item.id}>">
                    <div class="ith_img2">
                        <span class="mr20" style="height:4rem; width:6.5rem; background-image:url(<{$item.course_img}>)"></span>
                    </div>
                    <div class="box-col" style="padding-left:20px;">
                        <div class="h40 oh fs34"><{$item.title}></div>
                        <div class="h40 oh fs26 c-666666 pt10">主讲老师：<{if $item.school_id == 0}><{$item.teacher_name}><{else}><{$item.school_teacher_name}><{/if}></div>
                        <div class=" pt10">价格：<span class="c-FF0000 mr10">¥<{if $item.school_id == 0}><{$item['fx_price']|string_format:"%.2f"}><{else}><{$item.price|string_format:"%.2f"}><{/if}></span>
                          <!-- <span class="r mt10 fs26 c-999999"><{$item['add_time']|date_format:'%Y-%m-%d'}></span> -->
                        </div>
                        <!-- <div class="fs26 pt10 c-999999"><span class="mr10">97.13% 满意度</span><span class="r"><{$item.click_num}> 次学习</span></div> -->
                    </div>
                </a>
            </li>
            <{/foreach}>
        </ul>
    </div>
    <div class="weui-loadmore hide">
		<i class="weui-loading"></i>
		<span class="weui-loadmore__tips">正在加载</span>
    </div>
</div>



<!-- body 最后 -->
<script src="/static/public/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="/static/wap/weui/js/jquery.min.js"></script>
<script src="/static/wap/weui/js/jquery-weui.min.js"></script>
<script src="/static/wap/skin/js/demos.js"></script>
<link href="/static/public/layer/src/css/layui.css" rel="stylesheet">
<script src="/static/public/layer/src/layui.js"></script>
<script>
$.fn.Dashenselect("#select_ify",".box-col",".citytit",".citybox","i","s","a","click","curr","hover","selected");
layui.use('flow', function(){
    var flow = layui.flow;
    flow.load({
        elem: '#layui_flow' //流加载容器
        ,isAuto:false
        ,scrollElem: '#layui_flow' //滚动条所在元素，一般不用填，此处只是演示需要。
        ,done: function(page, next){ //执行下一页的回调
            //模拟数据插入
            setTimeout(function(){
                var lis = [];
                if(page > 1){
                    $.ajax({
                        type: "GET",
                        url: "/video/index/<{$info.order}>/<{$info.cate}>/<{$info.subject}>/"+page,
                        dataType:"json",
                        success: function(result){
                            if(result){
                                $.each(result,function(i, n){
                                    if(n.school_id == 0){
                                        var teacher_name = n.teacher_name;
                                        var price = n.fx_price;
                                    }else{
                                        var teacher_name = n.school_teacher_name;
                                        var price = n.price;
                                    }
                                    var html = '<li class="p20 brB">';
                                    html += '<a class="layout-box" href="/video/detail/'+n.id+'">';
                                    html += '<div class="ith_img2">';
                                    html += '<span class="mr20" style="height:5rem; width:8rem; background-image:url('+n.course_img+')"></span></div>';
                                    html += '<div class="box-col"><div class="h40 oh fs34">'+n.title+'</div>';
                                    html += '<div class="h40 oh c-666666 pt10">主讲老师：'+teacher_name+'</div>';
                                    html += '<div class="fs26 pt10">价格：<span class="c-FF0000 mr10">¥'+price+'</span></div>';
                                    $("#layui_flow").find("li:last").after(html)
                                    // console.log(html)
                                });

                            }
                        }
                    });
                }
                
            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                next(lis.join(''), page < "<{$count-1}>"); //假设总页数为 10
            }, 500);
        }
    });
});
</script>
</body>
</html>